<template>
  <div class="search-main">
    <header-top :title="title" @onBack="backEvent"></header-top>

    <div class="search-upper">
      <div class="search-upper-blank"></div>
      <input type="search" class="search-input"  id="search-input" v-model="searchInput" @focus="inputClick"  v-bind:maxlength="maxlength" v-bind:placeholder='placeholder' v-bind:class='{uninput: iconSousuo, inputting: !iconSousuo}' />
      <div class="search-box"><i class="iconfont icon-sousuo search-iconfont" v-show="iconSousuo"></i><i class="iconfont icon-qingkong search-icon-qingkong" v-show="iconQingkong" @click="searchClear"></i></div>
    </div>

    <!--下拉列表-->
    <div class="xiala" id="xiala" >
      <table v-if="searchResult.length>0">
        <tr v-if="index==2" v-for="item in searchResult" @click="onNichClick(item)" id='item.USER_CODE' class='nichxiala' data-nichName='item.NICKNAME'><td><span>{{item.NICKNAME}}</span></td></tr>
        <tr v-if="index==3" v-for="item in searchResult" @click="onZuheClick(item)" id='item.group_id' class='zuhexiala' data-mhclientId='item.client_id' data-groupName='item.group_name'><td  ><span>{{item.group_name}}</span></td></tr>
        <tr v-if="index==4" v-for="item in searchResult" @click="onBisaiClick(item)" id='item.GAME_ID' class='bisaixiala' data-bisaiName='item.GAME_NAME' data-beginDate='item.BEGIN_DATE' data-endDate='item.END_DATE' data-gameAttendPerson='item.GAME_ATTEND_PERSON' data-gameMaxLimit='item.GAME_MAX_LIMIT' data-createUser='item.CREATE_USER' data-joinBeginDate='item.JOIN_BEGIN_DATE' data-joinEndDate='item.JOIN_END_DATE'><td ><span>{{item.GAME_NAME}}</span></td></tr>
      </table>

    </div>
    <!--下拉列表-->

    <!--分类-->
    <div class="search-content" id="search-content" v-show="searchContent">
      <div class="search-content-blank"></div>
      <div class="search-tip">你还可以点击下列图标分类搜索哦</div>
      <div class="search-table-div">
        <table class="search-type-table">
          <tr>
            <td id="searchNich" class="searchNich" @click="clickNich"><img src="../../assets/images/search/nicheng.png"></td>
            <td id="searchZuhe" class="searchZuhe" @click="clickZuhe"><img src="../../assets/images/search/zuhe.png"></td>
            <td id="searchBisai" class="searchBisai" @click="clickBisai"><img src="../../assets/images/search/bisai.png"></td>
          </tr>
          <tr>
            <td>搜昵称</td>
            <td>搜组合</td>
            <td>搜比赛</td>
          </tr>
        </table>
      </div>
    </div>
    <!--分类-->

    <!--搜个股-->
    <div class="gegu" id="gegu" v-show="gegu">
      <div class="gegu-ssrs">
        <div class="gegu-ssrs-blank"></div>
        <table >
          <tr>
            <td><div class="gegu-ssrs-left"></div></td>
            <td>实时热搜</td>
          </tr>
        </table>
      </div>
      <div class="gegu-bottom"  v-show="geguBottom">
        <table>
          <tr>
            <td id="ssrs-td0" class="ssrs-item" @click="onGgrsClick(0)"><div class="w1"><div class="f1">1</div><div class="text ssrs-text0" v-if='rsggResult[0]' v-text="rsggResult[0].search_name"></div></div></td>
            <td id="ssrs-td1" class="ssrs-item" @click="onGgrsClick(1)"><div class="w1"><div class="f2">2</div><div class="text ssrs-text1" v-if='rsggResult[1]' v-text="rsggResult[1].search_name"></div></div></td>
            <td id="ssrs-td2" class="ssrs-item" @click="onGgrsClick(2)"><div class="w1"><div class="f3">3</div><div class="text ssrs-text2" v-if='rsggResult[2]' v-text="rsggResult[2].search_name"></div></div></td>
          </tr>
          <tr>
            <td id="ssrs-td3" class="ssrs-item" @click="onGgrsClick(3)"><div class="w1"><div class="f4">4</div><div class="text ssrs-text3" v-if='rsggResult[3]' v-text="rsggResult[3].search_name"></div></div></td>
            <td id="ssrs-td4" class="ssrs-item" @click="onGgrsClick(4)"><div class="w1"><div class="f4">5</div><div class="text ssrs-text4" v-if='rsggResult[4]' v-text="rsggResult[4].search_name"></div></div></td>
            <td id="ssrs-td5" class="ssrs-item" @click="onGgrsClick(5)"><div class="w1"><div class="f4">6</div><div class="text ssrs-text5" v-if='rsggResult[5]' v-text="rsggResult[5].search_name"></div></div></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="gegu-cxjg" id="gegu-cxjg" v-if=" index == 1 &&searchResult.length>0">
      <div class='text'>查询结果</div>
      <div class='cxjg-tablediv'>
        <table>
          <tr v-for="item in searchResult">
            <td @click="onGeguClick(item)">
              <div class='leftdiv' v-text="item.stockCode.slice(0,2)"></div>
            </td>
            <td id='item.stockCode' data-geguname='item.stockName' class='gegu-cxjgtext-td' @click="onGeguClick(item)">
              <span v-text="item.stockCode.slice(2)"></span>
              <span v-text="item.stockName"></span>
            </td>
            <td class='ggcx-item' @click="onZixuanClick(item)">
              <i v-if="item.whetherCollect=='no'" class='iconfont icon-jia search-iconfont' ></i>
              <i v-else class='iconfont icon-minus search-iconfont' ></i>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <!--搜个股-->

    <!--搜昵称-->
    <div class="nich" id="nich" v-show="nich">
      <div class="nich-rsnr">
        <div class="nich-rsnr-blank"></div>
        <table >
          <tr>
            <td><div class="nich-rsnr-left"></div></td>
            <td>热搜牛人</td>
          </tr>
        </table>
      </div>
      <div class="nich-bottom" id="nich-bottom" v-show="nichBottom">
        <table >
          <tr  class='rsnr-item' v-for="(item,i) in rsnrResult" @click="onRsnrClick(item)">
            <td><i class='iconfont' v-bind:class="{'icon-zhang1': true, 'search-iconfont-zhang1': true,'icon-zhang2': i==1, 'search-iconfont-zhang2': i==1,'icon-zhang3': i==2, 'search-iconfont-zhang3': i==2}"></i>
            <img :src="item.USER_HEAD"><span class='name' v-text="item.search_name"></span></td>
            <td><div><span class='num' v-text="item.search_qty"></span><br><span>人搜索</span></div></td>
            <td><i class='iconfont icon-xiangyou '></i></td>
          </tr>
        </table>
      </div>

    </div>
    <!--搜昵称-->

    <!--搜组合-->
    <div class="zuhe" id="zuhe" v-show="zuhe">
      <div class="zuhe-rszh">
        <div class="zuhe-rszh-blank"></div>
        <table >
          <tr>
            <td><div class="zuhe-rszh-left"></div></td>
            <td>热搜组合</td>
          </tr>
        </table>
      </div>
      <div class="zuhe-bottom" id="zuhe-bottom"  v-show="zuheBottom">
        <table>
          <tr class='rszu-item' data-gname='item.search_name' data-rszhClientId='item.client_id' v-for="item in rszhResult" @click="onRszhClick(item)"><td class='rszu-td-left'><div class='imgdiv'><img src='../../assets/images/beijing-quan.png'></div>
            <div class='rate' v-text="item.total_profit"></div></td>
            <td><span class='name' v-text="item.search_name"></span></td>
            <td class='td-right'><div class='right'><span class='num' v-text="item.search_qty"></span><br><span>人搜索</span></div></td>
            <td class='rszu-td-xiangyou'><i class='iconfont icon-xiangyou'></i></td></tr>
        </table>
      </div>
    </div>
    <!--搜组合-->
    <!--搜比赛-->
    <div class="bisai" id="bisai" v-show='game'>
        <div class="bisai-rsbs">
            <div class="bisai-rsbs-blank"></div>
            <table>
                <tr>
                    <td><div class="bisai-rsbs-left"></div></td>
                    <td>热搜比赛</td>
                </tr>
            </table>
        </div>
        <HSGames/>
    </div>
    <!--搜比赛-->
  </div>
</template>

<script>
  import Header from 'components/search/header'
  import Constant from 'common/constant'
  import RemoteDAO from 'common/remoteDAO'
  import LocalDAO from 'common/localDAO'
  import $ from 'jquery'
  import CommonUtil from 'common/common.util'
  import HSGames from 'components/search/HSGames'

  export default {
    name: 'Search',
    data () {
      return {
        title:'搜索',
        userCode: '',
        nickname: '',
        index: 0, //0搜个股,1搜昵称,2搜组合,3搜比赛
        searchInput:'',
        searchContent:false,
        gegu:false,
        iconQingkong:false,
        iconSousuo:true,
        geguCxjg:false,
        nich:false,
        zuhe:false,
        game: false,
        xiala:true,
        main:true,
        step1Gegu:false,
        step2Nicheng:false,
        step3Zuhe:false,
        step4Bisai:false,
        searchResult:[],
        rsggResult:[],
        rsnrResult:[],
        rszhResult:[],
        geguBottom:false,
        zuheBottom:false,
        nichBottom:false,
        placeholder:'搜个股',
        maxlength:''
      }
    },

    created: function () { // created里不直接写业务代码，统一调用methods里的方法
      this.initEvent()
    },

    components: {
        'header-top':Header,
        HSGames
    },

    watch:{
      searchInput:function(val){
          if(val.length > 0)this.getAnswer();
      }     
    },

    methods:{
      initEvent(){
        this.beforeRender();
        this.initView();
      },

      beforeRender(){
        this.nickName=LocalDAO.getNickname();
        if(this.nickName!="")   this.userCode=LocalDAO.getUserCode();
      },

      initView(){
        var self = this;
        switch (self.index){
          case 0:
            self.searchInput="";
            self.iconQingkong=false;
            self.iconSousuo=true;
            this.placeholder = '搜个股';
            self.geguCxjg=false;
            self.searchContent=true;
            self.gegu=false;
            self.nich=false;
            self.zuhe=false;
            self.game = false;
            self.xiala=false;
            break;
          case 1:
            this.placeholder = '输入证券代码/拼音首字母';
            self.searchContent=false;
            self.gegu=true;
            break;

          case 2:
            this.placeholder = '输入昵称';
            self.searchContent=false;
            self.nich=true;
            break;
          case 3:
            this.placeholder = '输入组合名称';
            self.searchContent=false;
            self.zuhe=true;
            break;
          case 4:
            this.placeholder = '输入比赛名称';
            self.searchContent=false;
            self.game = true;
            break;
        }
      },

      //清空
      searchClear:function(){
        var self=this;
        this.searchInput="";
        this.searchResult = [];
        self.iconQingkong=false;
        this.iconSousuo=true;
        self.geguCxjg=false;
        if(self.index== 1){
          this.placeholder = '输入证券代码/拼音首字母';
        }else if(self.index==2){
          this.placeholder = '输入昵称';
          self.xiala=false;
        }else if(self.index==3){
          this.placeholder = '输入组合名称';
          self.xiala=false;
        }else {
          this.placeholder = '输入比赛名称';
          self.xiala=false;
        }
      },

      //点击搜昵称图标
      clickNich:function(e){
        var self = this;
        self.index = 2;
        self.searchResult = [];
        this.placeholder = '输入昵称';
        self.searchContent=false;
        self.nich=true;
        self.title="牛人搜索";
        self.setMenuIdInSession(self.index);
        RemoteDAO.hotSearch("1",self.resounich);
      },

      //点击搜组合图标
      clickZuhe:function(e){
        var self = this;
        self.index = 3;
        self.searchResult = [];
        this.placeholder = '输入组合名称';
        self.searchContent=false;
        self.zuhe=true;
        self.title="组合搜索";
        self.setMenuIdInSession(self.index);
        RemoteDAO.hotSearch("2",self.resouzuhe);
      },

      //点击搜比赛图标
      clickBisai:function(e){
        var self = this;
        self.index = 4;
        self.searchResult = [];
        this.placeholder = '输入比赛名称';
        self.searchContent=false;
        self.title="比赛搜索";
        self.game = true;
        self.setMenuIdInSession(self.index);
      },

      //点击热搜组合列表
      onRszhClick(item){
        this.$router.push("/GroupDetail?groupId="+item.group_id+"&clientId="+item.client_id);
      },

      //点击热搜牛人列表
      onRsnrClick(item){
        this.$router.push("/OtherDetail?userCode="+item.search_code);
      },

      //点击输入框
      inputClick(){
        var self = this;
        self.iconSousuo=false;
        if(self.index == 0){
          RemoteDAO.hotSearch("3",self.resougegu);
          this.placeholder = '输入证券代码/拼音首字母';
          self.searchContent=false;
          self.gegu=true;
          self.index = 1;
          self.searchResult = [];
          self.title="搜索股票";
          self.setMenuIdInSession(self.index);
        }else {
          this.placeholder = '';
        }
      },

      //实时监听input输入
      getAnswer(){
        var self=this;
        var searchInputVal=$("#search-input").val();
        if(searchInputVal!=""){
          var searchSize=CommonUtil.sizeOfStr(searchInputVal);
          self.iconQingkong=true;
          self.iconSousuo=false;
          if(self.index == 1){
            self.geguCxjg=true;
            Bridge.callByJsUrl("gtjanrng://searchStock?stockcode="+searchInputVal+"&jstoken=1",function(data){
              self.showCxjgList(data.data);
            },"1");
          }else if(self.index == 2){
            if(searchSize<64){
              self.searchResult = [];
              var param = {"businType" : "1" ,"keyWord":searchInputVal,"pageSize":"5","pageNo":"1"};
              RemoteDAO.callUC12008310(param,self.nichUpdateView);  //???"49008" "1"为昵称 2为比赛"
            }else{
              this.$store.dispatch('setTip',{text:"牛人字节数不能超过64位哦"});
              this.maxlength=64;
            }
          }else if(self.index == 3){
            RemoteDAO.callJCL30014("0","1",searchInputVal,self.zuheUpdateView);  //???"40901" "1"
          }else{
            if(searchSize<128){
              var param = {"businType" : "2" ,"keyWord":searchInputVal,"pageSize":"5","pageNo":"1"};
              RemoteDAO.callUC12008310( param,self.bisaiUpdateView);  //???"49008" "1"为昵称 2为比赛
            }else{
              this.$store.dispatch('setTip',{text:"比赛字节数不能超过128位哦"});
              this.maxlength=128;
            }
          }
        }else {
          self.iconQingkong=false;
          self.geguCxjg=false;
          self.xiala=false;
        }
      },

      //点击个股查询列表
      onGeguClick(item){
        var self=this;
        var islogin="";
        if(this.nickName!=""){
          islogin="1";
        }else {
          islogin="0";
        }
        if(TDAPP){
          TDAPP.onEvent("3004","",{"usercode":this.userCode,"k2":item.stockCode,"k4":item.stockName});
          TDAPP.send();
        }   
        RemoteDAO.callStockLive(item.stockCode,"ordinary",islogin);
      },

      //点击个股查询列表中的自选
      onZixuanClick(item){
        if(this.nickName==""){
          //加自选 点击跳注册 埋点
          TDAPP.onEvent("2010","",{"usercode":"","k2":""});
          TDAPP.send();
          RemoteDAO.callNativeLogin(function(response) {
            window.location.reload(true);
          });
        }else {
          if(item.whetherCollect=="no"){
            RemoteDAO.addMyStock(item.stockCode,item.stockName,function(addzixuandata){
              if(addzixuandata.error=="0"){
                item.whetherCollect="yes";

              }else {
                //添加自选失败 处理办法
              }
            });
          }else {
            RemoteDAO.deleteMyStock(item.stockCode,item.stockName,function(delzixuandata){
              if(delzixuandata.error=="0"){
                item.whetherCollect="no";

              }else {
                console.log("原本就不在自选股列表");
                //添加自选失败 处理办法
              }
            });
          }
        }
      },

      //点击个股热搜列表
      onGgrsClick(id){
        var islogin="";
        if(this.nickName!=""){
          islogin="1";
        }else {
          islogin="0";
        }
        var rsggStockCode=[];
        var rsggName=[];
        for(var i=0;i<this.rsggResult.length;i++){
          rsggName[i]=this.rsggResult[i].search_name;
          rsggStockCode[i]=this.rsggResult[i].search_code;
        }
        switch(id){
          case 0:
            if(rsggName[0])  RemoteDAO.callStockLive(rsggStockCode[0],"ordinary",islogin);
          break;
          case 1:
            if(rsggName[1])  RemoteDAO.callStockLive(rsggStockCode[1],"ordinary",islogin);
            break;
          case 2:
            if(rsggName[2]) RemoteDAO.callStockLive(rsggStockCode[2],"ordinary",islogin);
            break;
          case 3:
            if(rsggName[3])  RemoteDAO.callStockLive(rsggStockCode[3],"ordinary",islogin);
            break;
          case 4:
            if(rsggName[4])  RemoteDAO.callStockLive(rsggStockCode[4],"ordinary",islogin);
            break;
          case 5:
            if(rsggName[5]) RemoteDAO.callStockLive(rsggStockCode[5],"ordinary",islogin);
            break;
        }
      },

      //点击组合列表
      onZuheClick(item){
        if(TDAPP){
          TDAPP.onEvent("3002","",{"usercode":this.userCode,"k2":item.group_id,"k3":item.client_id,"k4":item.group_name});
          TDAPP.send();
        }
        this.$router.push("/GroupDetail?groupId="+item.group_id+"&clientId="+item.client_id);
      },

      //点击昵称列表
      onNichClick(item){
        if(TDAPP){
           TDAPP.onEvent("3003","",{"usercode":this.userCode,"k2":item.USER_CODE,"k4":item.NICKNAME});
           TDAPP.send();
        }
        this.$router.push("/OtherDetail?userCode="+item.USER_CODE);
      },

      //点击比赛列表
      onBisaiClick(item){
        if(TDAPP){
          TDAPP.onEvent("3001","",{"usercode":this.userCode,"k2":item.GAME_ID,"k4":item.GAME_NAME});
          TDAPP.send();
        }
        this.$router.push("/game/gamedetail?gameId="+item.GAME_ID+"&gameName="+item.GAME_NAME+"&beginDate="+item.BEGIN_DATE+"&endDate="+item.END_DATE+"&gameAttendPerson="+item.GAME_ATTEND_PERSON+"&gameMaxLimit="+item.GAME_MAX_LIMIT+"&createUser="+item.CREATE_USER+"&joinBeginDate="+item.JOIN_BEGIN_DATE+"&joinEndDate="+item.JOIN_END_DATE);
      },

      //返回
      backEvent(){
        var self=this;
        switch (this.index){
          case 0:
            window.history.back();
            break;
          default:
            this.title="搜索";
            this.index = 0;
            self.searchResult = [];
            this.searchInput="";
            this.setMenuIdInSession(this.index);
            this.initView();
        }
      },

      //显示查询列表
      showCxjgList(cxjgList){
        var cxjgLength=cxjgList.length;
        this.searchResult=cxjgList;
      },

      //显示昵称列表
      nichUpdateView(nichmhdata){
        var nichmhArray=nichmhdata.body;
        this.searchResult=nichmhArray;
      },

      //显示组合列表
      zuheUpdateView(zuhemhdata){
        var zuhemhArray=zuhemhdata.body.data;
        this.searchResult=zuhemhArray;
      },

      //显示比赛列表
      bisaiUpdateView(bisaimhdata){
        var bisaimhArray=bisaimhdata.body;
        this.searchResult= bisaimhArray;
      },

      //热搜牛人列表
      resounich(rsncdata){
        self.nich=true;
        if(rsncdata.error=="0"){
          var rsncbody=rsncdata.data.body;
          rsncbody.sort(function(a, b){
            return b.search_qty - a.search_qty;
          });
          this.rsnrResult=rsncbody;
          if(rsncbody.length>0&&rsncbody[0].search_qty!=undefined){
            this.nichBottom=true;
            for(var i=0;i<this.rsnrResult.length;i++){
              if(this.rsnrResult[i].search_qty>=10000){
                this.rsnrResult[i].search_qty=parseFloat((this.rsnrResult[i].search_qty/10000).toFixed(2))+"万";
              }
              if(this.rsnrResult[i].USER_HEAD==""){
                this.rsnrResult[i].USER_HEAD="https://dl.app.gtja.com/pictures/niutou/tou1@2x.png";   //默认头像???
              }
            }
          }
        }
      },

      //热搜组合列表
      resouzuhe(rszhdata){
        var self = this;
        if(rszhdata.error=="0"){
          var rszhbody=rszhdata.data.body;
          this.rszhResult=rszhbody;
          if(rszhbody.length>0&&rszhbody[0].total_profit!=undefined){
            this.zuheBottom=true;
            for(var i=0;i<rszhbody.length;i++){
              if(this.rszhResult[i].total_profit!=undefined){
                this.rszhResult[i].total_profit=this.rszhResult[i].total_profit.toFixed(2)+"%";
                if(this.rszhResult[i].search_qty>=10000){
                  this.rszhResult[i].search_qty=parseFloat((this.rszhResult[i].search_qty/10000).toFixed(2))+"万";
                }
              }  
            }
          }
        }
      },

      //热搜个股列表
      resougegu(rsggdata){
        if(rsggdata.error=="0"){
          this.geguBottom=true;
          var rsggbody=rsggdata.data.body;
          this.rsggResult=rsggbody;
        }else {
          this.geguBottom=false;
        }
      },

      setMenuIdInSession(id){
        sessionStorage.setItem('searchMainId', id);
      },

      getMenuIdFromSession(){
        var id = sessionStorage.getItem('searchMainId');
        if(id == undefined || id == null || id.length == 0) id = '0';
        return id;
      }

    }
  }
</script>


<style scoped>
.uninput{
  margin-left: 20%;
}
.inputting{
  margin-left: 13%;
}
</style>
